<template>
  <div class="store-content item">
  <div class="item-box">
    <div class="gallery-wrapper">
      <div class="gallery">
        <div class="thumbnail">
          <ul>
            <li class="on" v-for="(item,index) in this.$store.state.detail.obj.stock_info[num].imgs">
                  <img :src="item" style="width: 100%" @click="setSrc(item,index)">
            </li>
          </ul>
        </div>
        <div class="thumb">
          <ul>
            <li class="on">
              <img :src="MaxNum==''?this.$store.state.detail.obj.stock_info[num].image:MaxNum" style="width: 100%">
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="banner">
      <div class="sku-custom-title">
        <div class="params-price">
          <span><em>¥</em><i>{{this.$store.state.detail.obj.stock_info[num].price}}</i></span>
        </div>
        <div class="params-info">
          <h4>{{this.$store.state.detail.obj.stock_info[num].title}}</h4>
          <h6>{{this.$store.state.detail.obj.stock_info[num].sub_title}}</h6>
        </div>
      </div>
      <div class="sku-dynamic-params-panel">
        <div class="sku-dynamic-params clear">
          <span class="params-name">颜色</span>
          <ul class="params-colors">
            <li class="cur" style="display: flex" v-for="(item,index) in this.$store.state.detail.obj.stock_info">
              <a :style="{'background':item.detail.color}" @click="getIndex(index)"><i></i></a>
            </li>
          </ul>
        </div>
        <div class="sku-dynamic-params clear">
          <div class="params-name">数量</div>
          <div class="params-detail clear">
            <div class="item-num js-select-quantity">
              <span class="down " @click="setNumber(-1)">-</span>
              <span class="num">{{shopNumber}}</span>
              <span class="up " @click="setNumber(1)">+</span>
            </div>
          </div>
        </div>
      </div>
      <div class="sku-status">
        <div class="cart-operation-wrapper clearfix">
          <span class="blue-title-btn js-add-cart" @click="seTshop"><a>加入购物车</a></span>
          <span class="gray-title-btn"><a>现在购买</a></span>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
import Vue from "vue";

export default {
  name: "Details",
  data(){
    return{
      num:0,//左边小图片
      MaxNum:'',//右边大图片
      number:0,//记录右边点击的索引号
      shopNumber:1,//商品数量
      shopIndex:0,//添加商品的下标
    }
  },
  methods:{
    setSrc(src,index){
      this.MaxNum=src
      this.number=index;
    },
    getIndex(index){
      this.shopIndex=index;
      this.num=index;
      this.MaxNum=''
    },
    setNumber(num){
      let number= this.shopNumber+num
      if(number>0){
        this.shopNumber+=num
        return
      }
      this.$message({
        message: '数量不能小于0！',
        type: 'warning'
      });
    },
    seTshop(){
      let obj={obj:this.$store.state.detail.obj.stock_info[this.shopIndex],shopNumber:this.shopNumber}
      this.$store.commit("shop/DetailAdd",obj);
      this.shopNumber=1;
      this.$message({
        message: '商品添加至购物车！',
        type: 'success'
      });
    }
  },
  mounted() {
    //获取商品详情数据
    let {num,id}=this.$route.query
    this.num=num
    this.$store.dispatch('detail/getDetail',id)
  }
}
</script>

<style scoped lang="less">
@import url('../assets/css/item.css');
</style>